<template>
  <div class="SuperviseLog">
    <a-timeline>
      <a-timeline-item :color="item.reply ? 'green' : 'blue'" :key="index" v-for="(item, index) in data">
        <div>
          <h4>
            <svg data-v-185a0379="" aria-hidden="true" class="icon svg-icon f20">
              <use data-v-185a0379="" xlink:href="#icon-geren"></use>
            </svg>
            <strong style="margin-left: 5px;">{{item.userName}}</strong>
            <a-button v-if="isReply" type="link" style="float: right;" @click="showInput(index)">回复</a-button>
          </h4>
          <div class="superviseItem">
            <p>督办意见: {{item.opinion}}</p>
            <p>督办时间: {{formatTime(item.createTime)}}</p>
            <p v-if="item.reply">回复意见: {{item.reply}}</p>
          </div>
          <a-input-search v-if="item.isInput" v-model="reply" type="text" style="margin-top: 10px;" @search="saveOpinion(item)">
            <a-button type="primary" slot="enterButton">
              回复
            </a-button>
          </a-input-search>
        </div>
      </a-timeline-item>
    </a-timeline>
  </div>
</template>

<script>

import projectService from '@/api/projectService'
export default {
  name: 'SuperviseLog',
  data () {
    return {
      data: [],
      reply: ''
    }
  },
  props: {
    projectId: {
      type: Number,
      default: () => {
        return 0
      }
    },
    isReply: {
      type: Boolean,
      default: () => {
        return true
      }
    }
  },
  mounted () {
    this.getTableList()
  },
  methods: {
    saveOpinion (item) {
      // item.reply = this.reply
      projectService.saveSuperviseLog(item).then(resp => {
        this.reply = ''
        this.getTableList()
        this.$message.success('回复成功')
      })
    },
    showInput (index) {
      this.opinion = ''
      this.data.forEach(item => {
        item.isInput = false
      })
      this.data[index].isInput = !this.data[index].isInput
      this.data = [...this.data]
    },
    formatTime (date) {
      var newDate = new Date(new Date(date).getTime() + 8 * 3600 * 1000).toJSON()
      return new Date(newDate).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
    },
    getTableList () {
      this.loading = true
      projectService.getSuperviseLogList({
        projectId: this.projectId
      }).then(resp => {
        this.data = resp

        this.data.forEach(item => {
          if (item.reply!=null){
            item.isInput = false
          }else {
            item.isInput = true
          }
        })
      })
    }
  }
}
</script>

<style scoped lang="less">
  .SuperviseLog {
    padding: 20px;

    .superviseItem {
      background-color: #f4f5f6;
      padding: 10px;
    }
  }

</style>
